<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width" />
  <meta name="author" content="www.yanshisan.cn" />
  <meta name="robots" content="all" />
  <title>留言板</title>
  <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../layui/css/layui.css" />
  <link rel="stylesheet" href="../css/master.css" />
  <link rel="stylesheet" href="../css/gloable.css" />
  <link rel="stylesheet" href="../css/nprogress.css" />
  <link rel="stylesheet" href="../css/message.css" />
  <link rel="shortcut icon" th:href="@{favicon.ico}" />
</head>
<body>
<div class="header">
</div>
<header class="gird-header">
  <div class="header-fixed">
    <div class="header-inner">
      <a href="javascript:void(0)" class="header-logo" id="logo">pilipili</a>
      <nav class="nav" id="nav">
        <ul>
          <li><a href="/homepage">首页</a></li>
          <li><a href="/article">博客</a></li>
          <li><a href="/message">留言</a></li>
          <li><a href="/link">友链</a></li>
          <li><a href="/loginOut" th:if="${session.name}">退出</a></li>
          <li><a href="#"><p th:inline="text" th:if="${session.name}">[[${session.name}]]</p></a></li>
          <li><a href="#"  th:if="${session.name}">
            <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${session.id}+'.jpg'" class="layui-nav-img" >
          </a></li>
        </ul>
      </nav>
      <a href="/html/login.html"  th:if="not ${session.name}" class="blog-user">
        <p style="font-family: 楷体">请登录</p>
      </a>
      <a class="phone-menu">
        <i></i>
        <i></i>
        <i></i>
      </a>
    </div>
  </div>
</header>
<div class="doc-container" id="doc-container">
  <div class="container-fixed">
    <div class="container-inner">
      <section class="msg-remark">
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">上传头像</button>
          <div class="layui-upload-list">
            <img th:src="'http://blog-cxz.oss-cn-beijing.aliyuncs.com/'+${session.id}+'.jpg'" style="height: 200px;width: 200px;border-radius:100px;" id="demo1" >
            <p id="demoText"></p>
          </div>
        </div>
        <form class="layui-form" action=""  >
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block">
            <input  type="hidden" id="user_id" name="user_id" required lay-verify="required"  autocomplete="off" class="layui-input" th:value="${session.id}">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">用户密码</label>
          <div class="layui-input-block">
            <input type="password"  name="user_password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" id="pass1">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-block">
            <input type="password"  name="user_password" required lay-verify="pwd" placeholder="请再次输入密码" autocomplete="off" class="layui-input" id="pass2">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-block">
            <input type="email" id="user_email" name="user_email" required lay-verify="emails" placeholder="请输入邮箱" autocomplete="off" class="layui-input" th:value="${session.email}">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">联系方式</label>
          <div class="layui-input-block">
            <input type="text" id="user_phone" name="user_phone" required lay-verify="phones" placeholder="请输入手机号" autocomplete="off" class="layui-input" th:value="${session.phone}">
          </div>
        </div>
        <div class="layui-form-item" pane="">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" id="user_sex" name="user_sex" value="男" title="男" checked="">
            <input type="radio"  name="user_sex" value="女" title="女">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">姓名</label>
          <div class="layui-input-block">
            <input type="text" id="user_name" name="user_name" required lay-verify="truename" placeholder="请输入您的姓名" autocomplete="off" class="layui-input" th:value="${session.name}">
          </div>
        </div>
          <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
              <input type="text"id="user_birthday" name="user_birthday" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" th:value="${session.birthday}">
            </div>
          </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button id="submit" type="button" data-type="reload" class="layui-btn layui-btn-primary">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      </section>
    </div>
  </div>
</div>
<footer class="grid-footer">
  <div class="footer-fixed">
    <div class="copyright">
      <div class="info">
        <div class="contact">
          <a href="https://github.com/qz501664112/501664112.github.com.git" class="github" target="_blank"><i class="fa fa-github"></i></a>
          <a href="https://wpa.qq.com/msgrd?v=3&uin=501664112&site=qq&menu=yes" class="qq" target="_blank" ><i class="fa fa-qq"></i></a>
          <a href="https://mail.qq.com" class="email" target="_blank" ><i class="fa fa-envelope"></i></a>
          <a href="weixin://" class="weixin"><i class="fa fa-weixin"></i></a>
        </div>
        <p class="mt05">
          Copyright &copy; 2021-2021 初学者 <a style="color: white" href="http://www.mygirlfriends.cn/">mygirlfriends.cn</a> 版权所有 ICP证:<a style="color: white" href="https://beian.miit.gov.cn/">赣ICP备2021004732号</a>
        </p>
      </div>
    </div>
  </div>
</footer>
<script src="../component/js/jquery-3.3.1.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/yss/gloable.js"></script>
<script src="../js/plugins/nprogress.js"></script>
<script>NProgress.start();</script>
<script src="../js/pagemessage.js"></script>
<script>NProgress.start();</script>
<script>
  window.onload = function () {
    NProgress.done();
  };
</script>
<script th:inline="javascript">
  layui.use(['upload', 'element', 'layer','form', 'layedit', 'laydate'], function() {
    var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer
            ,form = layui.form
            ,layedit = layui.layedit
            ,laydate = layui.laydate;
    //日期
    laydate.render({
      elem: '#user_birthday'
    });
    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
              elem: '#test1'
              , url: '/oss/uploadfile?fileName='+[[${session.id}]] //改成您自己的上传接口
              , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                  $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 1});
              }
              , done: function (res) {
                if(res.code > 0){
                  return layer.msg('上传失败');
                }
                //上传成功
                var demoText = $('#demoText');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                var fileupload = $(".image");
                fileupload.attr("value",res.data.src);
                console.log(fileupload.attr("value"));
                window.parent.location.reload();
              }
              , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                  uploadInst.upload();
                });
              }
            }
    )
  });
</script>
<script  th:inline="javascript">
  layui.use('form', function() {
    var form = layui.form;
    $("#submit").on("click", function () {
      $.ajax({
        type:'post',
        url:'/user/updateUser',
        data:{user_id:$("#user_id").val(),user_password:$("#pass1").val(),user_name:$("#user_name").val(),user_email:$("#user_email").val(),user_phone:$("#user_phone").val(),user_sex:$("#user_sex").val(),user_birthday:$("#user_birthday").val()},
        success:function (data) {
          if (data.status==200){
            layer.confirm('修改成功!')

          }else {
            layer.confirm('修改失败!')
          }

        },
        error:function () {
          layer.confirm('修改失败!')
        }
      })

    })
  });
</script>
</body>
</html>